<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <title>Title</title>
</head>
<body>
<div id="app">
<!--条件渲染-->
  <h1 v-if="awesmoe">hello</h1>
  <h1 v-else>oh</h1>
<!--列表渲染-->
    <li v-for="item in items">
        {{item.message}}
    </li>
<!--事件处理-->
    <button v-on:click="greet">greet</button>
</div>

<script>
    var app =new Vue({
        el: '#app',//和上方视图app绑定
        data: {
            awesmoe:true,
            message:"hello",
            items:[
                {message:'hello'},
                {message:'world'}
            ]
        },
        methods:{
            greet:function (){
                alert(this.items[1].message)
            }
        }
    })
</script>
</body>
</html>